// 第一阶段：图片轮播部分
var carousel = document.getElementById('carousel')  //轮播图外框
var imgList = document.getElementById('imgList')   //装所有图片的大盒子   
var imgs = document.getElementsByTagName('img')   //所有图片元素
var imgW = parseInt(getStyle(imgs[0],'width'));   //图片宽度
var timer1=null    // timer1用于控制一张图片完整切换的计时
var timer2=null    // timer2用于（run函数）单个图片滚动步长的计时，
var index = 1    //序号
var lis = document.getElementById('orderList').getElementsByTagName('li')  //所有序号<li>标签
var btnLeft = document.querySelector('.btn.left')  //按钮-左
var btnRight = document.querySelector('.btn.right')  //按钮-右

//用来移动图片
function movePic(){         //一张图片匀速走20步，达到视觉上的滚动效果,
    clearInterval(timer2)   //为了避免多次鼠标悬停、点击、多开计时器（下面的run函数会开timer2），每次开的时候就先清空
    imgList.style.left = -index*imgW+'px';   //盒子的left归位到 -index*imgW
    let step = -imgW/20       //每个图片走20步走完，走到一个图片宽度,这里是往右走，所以step是负数
    run(step)                //imgList.style.left .加负数，往左走
    moveOrder()    //移动序号
}

//运动函数
function run(step){
    let count = 0                        //计数      
    timer2 =setInterval(function(){
        if(count == 20){          //走完20步（一张图的宽度），清除计时器
            clearInterval(timer2)   
        }else{
            count++           
            imgList.style.left = parseInt(imgList.style.left) + step +'px'   //往右走
        }
    },50)
}

//自动滚动
function autoMove(){
    clearInterval(timer1)   //为了避免多次鼠标悬停、点击、多开计时器，每次开的时候就先清空
    timer1 =setInterval(function(){
        
        if(index >= imgs.length-1){    //最后一张的下标
            index = 1     //切换到第一张
        }    
        movePic() //移动图片
        index++   //如果不是最后一张，那就正常滚动
    },2000)
}
autoMove()

// 第二部分，序号跟随滚动   
function moveOrder(){
    for(let i =0;i<lis.length;i++){
        lis[i].className = ''
    }                                  
    lis[index%(imgs.length-2)].className = 'on'     
    //图片移动的时候index范围是51234，这里利用了index和lis下标差距为1，51234  %5 = 01234
}

// 第三部分，鼠标点击序号，自主移动
for(let j =0;j<lis.length;j++){
    lis[j].onmouseover = function(){    
        index = j                //点谁，index就赋值谁
        movePic()              //移动
        index++                 //为了弥补鼠标移开后和autoMove()的差值
        if(index == imgs.length-1){    //最后一张的下标（这里是6）
            index = 1     //切换到第一张
        } 
    }
    lis[j].onmouseout = function(){
        autoMove()
    }   //鼠标离开继续移动
}

// 第四部分，显示按钮,按钮控制图片移动
carousel.onmouseover = function(){
    btnLeft.style.display = 'block'
    btnRight.style.display = 'block'
    clearInterval(timer1)     //鼠标移动上来暂停轮播
}
carousel.onmouseout = function(){
    btnLeft.style.display = 'none'
    btnRight.style.display = 'none'
    autoMove()            //鼠标移走继续轮播
}
btnRight.onclick = function(){
    movePic()
    index++
    if(index >= imgs.length-1){    //最后一张的下标 
        index = 1     //切换到第一张
    } 
}
btnLeft.onclick = function(){   //难点在这里，在这之前(图片移动，右按钮点击)用到的坐标都是 51234。从这里开始，用到的坐标是23401
    //  console.log(index) //index原本范围是  2,3,4,0,1          
    index--                // 左移 index ->  1,2,3,-1,0       
    if(index<0){         //如果是第一张，并且点击左按钮
        index = imgs.length-3      //imgs.length-2  -1     index -> 1,2,3,4,0
    }
    clearInterval(timer2)   //这里是和movePic一样的代码，就是变成了+step
    imgList.style.left = -(index+1)*imgW+'px';   
    let step = imgW/20      //这里step是正数            
    run(step)    //往左走
    for(let i =0;i<lis.length;i++){    //因为用到的序号不一样，所以这里重写moveOrder
        lis[i].className = '' 
    }
    lis[(index+imgs.length-3)%(imgs.length-2)].className = 'on'   //  12340     +4  %5 =  01234    
}

//获取元素样式
function getStyle(element,attr){
    return element.currentStyle?element.currentStyle[attr]:getComputedStyle(element,null)[attr];  //带px的字符串
}
//浏览器为了节约资源，会停止不是当前窗口下的定时器，反复切换就会出现异常
document.addEventListener("visibilitychange", function() {
    if (document.hidden === true) { //页面被挂起
        clearInterval(timer1)   //清除一次轮播
    } else {
        autoMove()// 页面由挂起被激活
    }
});